<template>
  <div class="page-container">
    <!-- 顶部横幅 -->
    <div class="header-banner">
      <h2>重置密码</h2>
      <p>设置强密码，保护您的账户安全</p>
    </div>
    <div class="password-content">
      <!-- 卡片网格 -->
      <div class="card-grid">
        <!-- 密码重置表单 -->
        <el-card class="form-card" shadow="hover">
          <h3 class="section-title">修改密码</h3>
          <el-form :model="form" :rules="rules" ref="passwordForm" label-width="100px" class="password-form">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="form.oldPassword" type="password" show-password placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次输入新密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="submitting" @click="handleSubmit" class="submit-button">
                <i class="el-icon-check"></i> 保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 密码安全提示 -->
        <el-card class="tips-card" shadow="hover">
          <h3 class="section-title">密码安全提示</h3>
          <ul class="tips-list">
            <li>密码长度至少8位</li>
            <li>包含字母、数字和特殊字符</li>
            <li>避免使用个人信息</li>
            <li>定期更新密码</li>
          </ul>
        </el-card>
      </div>
      <!-- 常见问题 -->
      <el-card class="faq-card" shadow="hover">
        <h3 class="section-title">常见问题</h3>
        <el-collapse accordion>
          <el-collapse-item title="忘记旧密码怎么办？" name="1">
            <p>请联系客服或通过邮箱验证码登录。</p>
          </el-collapse-item>
          <el-collapse-item title="设置密码时有哪些要求？" name="2">
            <p>密码需包含6位以上，建议包含大写字母、小写字母、数字和符号，避免使用简单数字或生日。</p>
          </el-collapse-item>
          <el-collapse-item title="如何确保密码安全？" name="3">
            <p>使用复杂密码，避免在多个平台使用相同密码。</p>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { resetPasswordService } from '@/api/user'
import { useUserInfoStore } from '../../stores/userInfo'

const passwordForm = ref(null)
const userInfoStore = useUserInfoStore()
const submitting = ref(false)
const form = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const rules = {
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const handleSubmit = () => {
  passwordForm.value.validate(async (valid) => {
    if (valid) {
      try {
        submitting.value = true
        await resetPasswordService(userInfoStore.userInfo.id, form.oldPassword, form.newPassword)
        ElMessage.success('密码重置成功')
        passwordForm.value.resetFields()
      } catch (error) {
        ElMessage.error('密码重置失败')
      } finally {
        submitting.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.header-banner {
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(90deg, #409eff 50%, #79bbff 100%);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;

  h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
  }

  p {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
  }
}

.password-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  height: fit-content;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 10px;
  text-align: center;
}

.form-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  min-height: 300px; /* 确保最小高度与 tips-card 对齐 */
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .password-form {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 16px;
      width: 100%;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;

      :deep(.el-form-item__label) {
        font-size: 13px;
      }

      :deep(.el-input) {
        width: 100%;
      }
    }

    .submit-button {
      width: 100%;
      max-width: 400px;
      font-size: 15px;
      padding: 10px;
      border-radius: 6px;
      transition: background-color 0.3s ease;
      display: block;
      margin: 0 auto;

      &:hover {
        background-color: var(--el-color-primary-dark-2);
      }
    }
  }
}

.tips-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  min-height: 300px; /* 与 form-card 对齐 */
  display: flex;
  flex-direction: column;
    .section-title {
      font-size: 22px;  
      font-weight: 600;
      text-align: center;
      margin-bottom: 12px;
      color: var(--el-color-primary); 
    }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中内容 */

    li {
      font-size: 18px;
      color: var(--text-color);
      margin-bottom: 10px;
      padding-left: 20px;
      position: relative;
      line-height: 2.0; 

      &:before {
        content: '✔';
        position: absolute;
        left: 0;
        color: var(--el-color-primary);
        font-weight: bold;
      }
    }
  }
}

.faq-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  width: 100%;
  height: fit-content;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .el-collapse {
    border: none;

    :deep(.el-collapse-item__header) {
      font-size: 13px;
      padding: 8px 12px;
      background: #f5f7fa;
      border-radius: 6px;
      margin-bottom: 6px;
    }

    :deep(.el-collapse-item__content) {
      font-size: 13px;
      padding: 8px 12px;
    }
  }
}
</style>